/**
* @Author: zmx
* @Date: 2023/9/26
* @Description:
*/
<template>
  <el-dialog :title="'添加说明'" :visible.sync="show" append-to-body width="750px" top="300px" :before-close="handleClose">
    <div class="left">
      <div>
        <span>巡检名称：</span>
        <span>{{ info.patrolPlanName }}</span>
      </div>
      <div>
        <span>巡检类型：</span>
        <span>{{ info.patrolPlanType }}</span>
      </div>
    </div>
    <div class="content">
      <el-form :inline="true" :model="formInline" ref="formInline" label-width="125px" :rules="rules">
        <div style="display: flex;justify-content: space-between">
          <div style="width: 350px;display: inline-block;">
            <el-row>
              <el-form-item label="选择作业项：" prop="assignSubId">
                <el-select
                  v-model="formInline.assignSubId"
                  value-key="id"
                  filterable
                  clearable
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in workList"
                    placeholder="请选择作业项"
                    :key="item.assignId"
                    :label="item.assignSubName"
                    :value="item.assignId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="状态：" prop="checkStatus">
                <el-select
                  v-model="formInline.checkStatus"
                  value-key="id"
                  filterable
                  clearable
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in checkStatus"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    placeholder="请选择状态"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="告警等级：" v-if="formInline.checkStatus!==0">
                <el-select
                  v-model="formInline.warnLevel"
                  value-key="id"
                  filterable
                  clearable
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in warnLevel"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                    placeholder="请选择告警等级"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="图片地址：">
                <img class="imgAres" :src="urlImg" alt="">
              </el-form-item>
            </el-row>

          </div>
          <div style="display: inline-block;">
            <el-form-item label="结论：" prop="checkDesc">
              <el-input style="width: 200px" type="textarea" :rows="4" v-model="formInline.checkDesc" placeholder="请输入内容描述"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="checkBtn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {patrol} from '../../api/inspection/apiUntil'
import {getPatrolAssign} from "../../api/inspection/pator";

export default {
  props: ['brightDialog', 'urlImg', 'info', 'row'],
  data() {
    return {
      rules: {
        assignSubId: [
          {required: true, message: '请选择作业项', trigger: 'blur'}
        ],
        checkStatus: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
        checkDesc: [
          {required: true, message: '请输入内容描述', trigger: 'blur'}
        ]
      },
      show: false,
      workList: [],
      checkStatus: [
        {
          name: '正常',
          value: 0
        },
        {
          name: '异常',
          value: 1
        },
      ],
      warnLevel: [
        {
          name: '低风险',
          value: '2'
        },
        {
          name: '中风险',
          value: '3'
        },
        {
          name: '高风险',
          value: '4'
        },
        {
          name: '重大风险',
          value: '5'
        },
      ],
      formInline: {
        warnLevel: '',
        assignSubId: '',
        checkUrl: '',
        checkDesc: '',
        checkStatus: ''
      },
    };
  },
  mounted() {
    //显示弹窗
    this.show = this.brightDialog
    this.getList()

  },
  methods: {
    getList() {
      patrol.getPatrolAssign({taskId: this.info.id}).then((res) => {
        if (res.data) {
          // console.log(res.data)
          this.workList = res.data
        }
      })
    },
    //关闭弹窗
    handleClose() {
      this.show = false
      this.$emit('closeDialog')
    },
    getResult(res) {
      if (res.code === 200) {
        this.$message({
          message: '上传成功',
          type: 'success'
        });
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
      this.handleClose()
    },
    checkBtn() {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          let param = {
            assignSubId: this.formInline.assignSubId,
            warnLevel: this.formInline.checkStatus === 0 ? 1 : this.formInline.warnLevel,
            checkUrl: 'https://rrmod-1.obs.cn-east-3.myhuaweicloud.com:443/image%2F1663293713385.jpg',//this.formInline.checkUrl||
            taskId: this.info.id,
            taskCurrentId: this.row.id,
            checkDesc: this.formInline.checkDesc,
            checkStatus: this.formInline.checkStatus
          }
          patrol.getRecordAdd(param).then((res) => {
            this.getResult(res)
          })
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
> > > .el-dialog__header {
  padding: 20px !important;
  background: #1B7B87;
}

> > > .el-dialog__title {
  color: #fff !important;
  font-size: 16px;
}

.left {
  width: 100%;
  display: flex;
  justify-content: space-between;

  div {
    margin-top: 15px;

    span {
      display: inline-block;

    }
  }
}

.content {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.imgAres {
  height: 50px;
  width: 100%;
  object-fit: cover;
}
</style>
